<template>
  <a-modal width="60%" v-model:visible="visible"  :footer="false">
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :crud="crud" :columns="columns" ref="crudRef">

        <template #create_time="{ record }">
          {{ tool.dateFormat(record.create_time, 'yyyy-MM-dd hh:mm:ss', '-') }}
        </template>

        <template #up_img="{ record }">
          <a-avatar shape="square">
            <img :src="record.up_img?record.up_img:'/nopic.png'" style="object-fit: cover" />
          </a-avatar>
        </template>

      </ma-crud>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue'
import infoAdv from '@/api/info/infoAdv'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import paymentMember from "@/api/payment/paymentMember";

const crudRef = ref()
const visible = ref(false)
const currentRow = ref({ id: undefined,name: undefined})

const open = (row) => {
  currentRow.value.id= row.id
  crudRef.value.requestData()
  visible.value = true
}

const numberOperation = (newValue, id, numberName) => {
  infoAdv.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchStatus = (statusValue, id, statusName) => {
  infoAdv.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}


const crud =reactive({
  autoRequest: false,
  bordered:{ wrapper: true, cell: true },
  api: infoAdv.getList,
  recycleApi: infoAdv.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 160,
  add: { show: true, api: infoAdv.save, auth: ['info:adv:save'] },
  edit: { show: true, api: infoAdv.update, auth: ['info:adv:update'] },
  delete: {
    show: true,
    api: infoAdv.deletes, auth: ['info:adv:delete'],
    realApi: infoAdv.realDeletes, realAuth: ['info:adv:realDeletes']
  },
  recovery: { show: true, api: infoAdv.recoverys, auth: ['info:adv:recovery'] },
  formOption: { width: '800px' },
  beforeAdd: (form) => form.ap_id = currentRow.value.id,
  beforeRequest: (params) => {
    params.ap_id = currentRow.value.id
  },
});

const columns = reactive([
  {
    title: "广告自增标识编号",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    rules: {
      required: true,
      message: "请输入广告自增标识编号"
    }
  },

  {
    title: "标题",
    dataIndex: "adv_title",
    formType: "input",
    search: true,
    rules: {
      required: true,
      message: "请输入广告内容描述"
    }
  },
  {
    title: "子标题",
    dataIndex: "adv_sub_title",
    formType: "input",
    search: true,
    rules: {
      required: true,
      message: "请输入广告内容描述"
    }
  },

  {
    title: "上传类型",
    dataIndex: "up_type",
    formType: "radio",
    search: true,
    dict: { data: [{ label: '图片', value: 1 }, { label: '视频', value: 2 }], translation: true },
    onControl: (val, maFormObject) => {
      const service = maFormObject.getColumnService()
      if (val == 1) {
        service.get('up_img').setAttr('display', true)
        service.get('up_file').setAttr('display', false)
      } else {
        service.get('up_img').setAttr('display', false)
        service.get('up_file').setAttr('display', true)
      }
    },
    addDefaultValue: 1
  },
  {
    title: "广告图",
    dataIndex: "up_img",
    formType: "upload",
    returnType: "url",
    search: false,
    type: "image",
    onlyData: true,
    hide:true

  },
  {
    title: "广告视频",
    dataIndex: "up_file",
    formType: "upload",
    returnType: "url",
    search: false,
    type: "file",
    onlyData: true,
    hide:true
  },
  {
    title: "广告内容",
    dataIndex: "adv_content",
    formType: "textarea",
    search: false,
    rules: {
      required: true,
      message: "请输入广告内容"
    }
  },
  {
    title:'web跳转链接',
    dataIndex: "jump_url",
    formType: "input",
    width:120,
    search: false,
    rules: {
      required: true,
      message: "请输入广告内容"
    }
  },
  // {
  //   title: "开始时间",
  //   dataIndex: "adv_start_time",
  //   formType: "date",
  //   width:180,
  //
  //   showTime: true,
  // },
  // {
  //   title: "结束时间",
  //   dataIndex: "adv_end_time",
  //   formType: "date",
  //   width:180,
  //
  //   showTime: true,
  //   range: false
  // },
  {
    title: "排序",
    dataIndex: "order_sort",
    formType: "input-number",
    search: false,
    rules: {
      required: true,
      message: "请输入排序"
    },

    addDefaultValue:100,
  },
  {
    title: "点击率",
    dataIndex: "click_num",
    formType: "input",
    search: false,
    rules: {
      required: true,
      message: "请输入点击率"
    },
    addDisplay: false,
    editDisplay: false,
    addDefaultValue:100,
  },
  {
    title: "是否会员",
    dataIndex: "is_allow",
    formType: "radio",
    search: false,
    rules: {
      required: true,
      message: "请输入会员购买的广告是否通过审核0未审核1审核已通过2审核未通过"
    },
    dict: {
      name: "data_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    },
    addDefaultValue:1
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    search: true,
    dict: {
      name: "data_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    },
    addDefaultValue:1,
  },

  {
    title: "创建时间",
    dataIndex: "create_time",
    width:180,
    formType: "date",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "更新时间",
    dataIndex: "updated_time",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
defineExpose({ open })
</script>
<script> export default { name: 'info:adv' } </script>